<template>
  <div>
    <input
      type="text"
      placehold="请输入id进行查询"
      v-model="inputValue"
      ref="input"
      @keyup="goSearch"
    />
    <!-- 这里v-show比v-if省性能 -->
    <div class="conten" v-show="isShow">
      <div class="contenlist" v-for="(item, index) in list" :key="index">
        <!-- <span>{{item.id}}</span> -->
        <!-- <span>{{item.name}}</span> -->
        <!-- <span>{{item.time}}</span> -->
        <span v-html="item.id"></span>
        <span v-html="item.name"></span>
        <span v-html="item.time"></span>
      </div>
    </div>
  </div>
</template>
<script>
// import _ from 'lodash'
export default {
  data () {
    return {
      inputValue: '',
      isShow: false,
      statu: true,
      dataList: [
        { id: '9527', name: '刘一', time: '2020-07-10' },
        { id: '9528', name: '陈二', time: '2020-08-10' },
        { id: '9259', name: '张三', time: '2020-09-10' },
        { id: '9277', name: '李四', time: '2020-10-10' },
        { id: '1205', name: '王五', time: '2020-11-10' },
        { id: '1206', name: '赵六', time: '2020-12-10' },
        { id: '1307', name: '孙七', time: '2021-01-10' },
        { id: '1308', name: '周八', time: '2021-02-10' },
        { id: '1309', name: '吴九', time: '2021-03-10' },
        { id: '1300', name: '郑十', time: '2021-04-10' }
      ],
      list: []
    }
  },
  methods: {
    search () {
      this.list = []
      this.inputValue = this.$refs.input.value
      // 判断展示列表，如果输入了就展示没输入就不展示
      if (this.inputValue.length > 0) {
        this.isShow = true
      } else {
        this.isShow = false
      }

      this.dataList.map(item => {
        // id、name、time去分别跟输入的值进行比较
        if (
          item.id.indexOf(this.inputValue) !== -1 ||
          item.name.indexOf(this.inputValue) > -1 ||
          item.time.indexOf(this.inputValue) > -1
        ) {
          // 将当前匹配到的值添加到list数组中
          // this.list.push(item); // 这里需要深拷贝 下面两种方法都可以

          this.list.push(JSON.parse(JSON.stringify(item)))
          // this.list.push(_.cloneDeep(item)); // _.cloneDeep 需要下载lodash
        }
      })

      this.list.map(item => {
        item.id = this.brightKeyword(item.id)
        item.name = this.brightKeyword(item.name)
        item.time = this.brightKeyword(item.time)
      })
    },
    brightKeyword (val) {
      const keyword = this.inputValue
      if (val.indexOf(keyword) > -1) {
        // replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
        // font标签 规定文本的尺寸、字体和颜色
        return val.replace(keyword, `<font color='tomato'">${keyword}</font>`)
      } else {
        return val
      }
    },
    // 节流函数
    goSearch () {
      // 保持this的指向始终指向vue实例
      const that = this
      if (!that.statu) {
        return
      }
      that.statu = false
      setTimeout(function () {
        console.log(new Date())
        that.search() // 调用写好的方法
        that.statu = true
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.conten {
  margin-top: 10px;
  width: 300px;
  height: 400px;
  border: 1px solid pink;
  overflow-y: auto;
  .contenlist {
    padding: 20px;
    > span {
      padding-right: 10px;
    }
  }
}
</style>
